<template>
  <div class="submit-page">
    <!-- 左侧提交表单 - 改为绝对定位 -->
    <div class="form-container" :class="{ 'collapsed': !formVisible }">
      <!-- 折叠按钮 -->
      <div class="collapse-btn" @click="toggleForm">
        <el-icon :class="{ 'rotate-icon': !formVisible }">
          <ArrowRight />
        </el-icon>
      </div>

      <div class="form-content" v-show="formVisible">
        <div class="form-header">
          <h2 class="centered-title">开放街景平台 - 数据提交</h2>
        </div>
        <SubmitForm
            ref="formRef"
            :coordinates="selectedCoordinates"
            @start-pick-coordinates="startPickCoordinates"
            @form-mounted="setCoordinateHandler"
        />
      </div>
    </div>

    <!-- 地图容器 -->
    <div class="map-container" :style="{ 'left': formVisible ? '350px' : '0' }">
      <Map
          ref="mapRef"
          @map-loaded="onMapLoaded"
          @map-click="handleMapClick"
      />
    </div>
  </div>
</template>

<script>
import Map from './Map.vue'
import SubmitForm from './SubmitForm.vue'
import { convertBD09ToWGS84 } from '../utils/baiduConvert'
import * as coordtransform from 'coordtransform'
import { ArrowRight } from '@element-plus/icons-vue'

export default {
  name: 'SubmitPage',
  components: {
    Map,
    SubmitForm,
    ArrowRight
  },
  data() {
    return {
      map: null,
      formVisible: true,
      selectedCoordinates: {
        longitude: '',
        latitude: ''
      },
      mapClickCoordinates: { lng: '', lat: '' }
    }
  },
  methods: {
    toggleForm() {
      this.formVisible = !this.formVisible
    },
    onMapLoaded(mapInstance) {
      this.map = mapInstance
      // 设置初始位置
      this.setInitialPosition()
    },

    // 处理地图点击事件
    handleMapClick(point) {
      // 将BD09坐标转换为WGS84
      const wgs84Point = this.convertBD09ToWGS84(point.lng, point.lat)

      // 存储转换后的坐标
      this.mapClickCoordinates = {
        lng: wgs84Point[0].toFixed(6),
        lat: wgs84Point[1].toFixed(6)
      }

      // 更新表单坐标
      this.$refs.formRef.updateCoordinates(
          this.mapClickCoordinates.lng,
          this.mapClickCoordinates.lat
      )

      // 添加标记
      this.addMarker(point.lng, point.lat)
    },

    // 设置初始位置
    setInitialPosition() {
      // 使用北京中心点作为默认位置
      const defaultPoint = { lng: 116.404, lat: 39.915 }
      const wgs84Point = convertBD09ToWGS84(defaultPoint.lng, defaultPoint.lat)

      this.selectedCoordinates = {
        longitude: wgs84Point.lng.toFixed(6),
        latitude: wgs84Point.lat.toFixed(6)
      }

      // 添加默认标记
      this.addMarker(defaultPoint.lng, defaultPoint.lat)
    },
    convertBD09ToWGS84(lng, lat) {
      // BD09转GCJ02
      const gcj02Point = coordtransform.bd09togcj02(lng, lat)
      // GCJ02转WGS84
      return coordtransform.gcj02towgs84(gcj02Point[0], gcj02Point[1])
    },

    // 在地图上添加标记
    addMarker(lng, lat) {
      if (this.map) {
        // 清除之前的标记
        this.map.clearOverlays()

        // 添加新标记
        const point = new BMapGL.Point(lng, lat)
        const marker = new BMapGL.Marker(point)
        this.map.addOverlay(marker)

        // 居中显示
        this.map.panTo(point)
      }
    }
  }
}
</script>

<style scoped>

.submit-page {
  position: relative;
  width: 100%;
  height: 100%;
}

.map-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  transition: left 0.3s ease;
}

.form-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 320px;
  z-index: 1000;
  transition: transform 0.3s ease;
  display: flex;
}

.form-container.collapsed {
  transform: translateX(-320px);
}

.form-content {
  width: 350px;
  height: 100%;
  background: white;
  box-shadow: 2px 0 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.collapse-btn {
  width: 30px;
  height: 60px;
  background: white;
  border-radius: 0 15px 15px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  margin-top: 50vh;
  transform: translateY(-50%);
  z-index: 1001;
  position: absolute;
  right: -30px;
}

.collapse-btn:hover {
  background: #f5f7fa;
}

.collapse-btn .rotate-icon {
  transform: rotate(180deg);
}

/* 响应式设计 */
@media (max-width: 992px) {
  .form-container {
    width: 300px;
  }

  .form-container.collapsed {
    transform: translateX(-270px);
  }

  .map-container {
    left: 0 !important;
  }

  .collapse-btn {
    height: 40px;
    margin-top: 20px;
    transform: none;
  }
}
.centered-title {
  text-align: center;
}
</style>
